Vite 절대 경로 설정

마지막 수정일: 2025. 07. 02.

TLDR

tsconfig.json은 빌드 전 컴파일러가 절대경로를 설정할 수 있게 compiler options(baseUrl + paths)를
vite.config.mts는 vite 번들러가 실제 코드 실행 시 module 경로를 resolve할 수 있게 resolve(alias)를 설정해야 함
다만 vite-tsconfig-paths package를 통해서 bundler 설정을 하지 않고도 가능

tsconfig.json

타입스크립트 컴파일러용.

JSON 
// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src", // 경로 지정
    "paths": {
      "@/*": ["*"], // @/lib -> src/lib
      "@libs/*": ["libs/*"], // @libs -> src/libs/ 
    }
  }
}

vite.config.mts(ts)

vite 번들러 용

TYPESCRIPT 
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
	alias: [{ find: '@', replacement: '/src' }], // @/lib → [프로젝트 루트]/src/lib
	//src/lib  (== path.resolve(__dirname, 'src/lib'))
  },
});